<template>
    <div>
        <heads></heads>
        <group gutter="0">
            <cell title="头像" is-link @click.native="head">
                <img width="20" style="display:block;margin-right:5px;"
                                                               src="static/images/head.png">
                </cell>
            <cell title="用户名" is-link @click.native="name"></cell>
            <cell title="介绍" is-link @click.native="introduce"></cell>
        </group>
        <group>
            <popup-radio title="性别" :options="sexs" v-model="sex" placeholder="请选择性别"></popup-radio>
            <group  gutter="0">
                <datetime
                        :min-year="minYear"
                        :max-year="maxYear"
                        v-model="datetime"
                        @on-change="onChangeDate"
                        title="生日"
                        @on-cancel="logDateTime('cancel')"
                        @on-confirm="onConfirmDateTime"
                        @on-hide="logDateTime('hide', $event)"></datetime>
            </group>


            <x-address @on-hide="logHideAddress" @on-show="logShowAddress" title="地区" v-model="address" :list="addressData"
                       @on-shadow-change="onShadowChange" placeholder="请选择地址" ></x-address>

        </group>

        <actionsheet v-model="headShow" :menus="headText" show-cancel></actionsheet>
        <div v-transfer-dom>
            <popup v-model="nameShow">
                <x-textarea :max="200"  name="username" :show-counter="false" :height="100" :rows="8" :cols="30" ></x-textarea>
                <div style="height: 34px"><span  class="bt">确定</span></div>
            </popup>
            <popup v-model="introduceShow">
                <x-textarea :max="200" ref="introduceShow" :show-counter="false" :height="100" :rows="8" :cols="30" ></x-textarea>
                <div style="height: 34px"><span  class="bt">确定</span></div>
            </popup>

        </div>

    </div>
</template>

<script>
    import {Group, Cell, Actionsheet, Datetime, XAddress, ChinaAddressV4Data, PopupRadio,XTextarea,Popup,TransferDom} from 'vux'
    import heads from '../header';

    export default {
        directives: {
            TransferDom,
        },
        components: {
            Cell,
            Group,
            heads,
            Actionsheet,
            Datetime,
            XAddress,
            ChinaAddressV4Data,
            PopupRadio,
            XTextarea,
            Popup
        },
        name: "user-edit",
        methods: {
            head() {
                this.headShow = true;
            },
            name() {
                this.nameShow = true;
            },
            introduce(){
                this.introduceShow = true;
            },
            onChangeDate(val) {
                console.log('change', val)
            },

            onShadowChange (ids, names) {
                console.log(ids, names)
            },
            logDateTime (str1, str2 = '') {
                console.log(str1, str2)
            },
            onConfirmDateTime (val) {
                console.log('on-confirm arg', val)
                console.log('current value', this.value1)
            },
            getName (value) {
                return value2name(value, ChinaAddressV4Data)
            },
            logHideAddress (str) {
                console.log('on-hide', str)
            },
            logShowAddress (str) {
                console.log('on-show')
            },
            getFullYear(){
               var date = new Date();
               this.maxYear=date.getFullYear();
            }
        },
        data() {
            return {
                headShow: false,
                nameShow:false,
                introduceShow:false,
                minYear:1970,
                maxYear:2018,
                headText: {
                    menu1: '拍照',
                    menu2: '从相册选取'
                },
                sex:'1',
                sexs: [{
                        key: '1',
                        value: '男'
                    },
                    {
                        key: '2',
                        value: '女'
                    }
                ],
                datetime: '2015-11-12',
                addressData: ChinaAddressV4Data,
                showAddress: false,
                address:['430000', '430400', '430407'],
            }
        },
        created(){
            this.getFullYear();
        }
    }
</script>

<style lang="less" scoped>
    @import "../../assets/css/comm";
    .bt{
        display: block;padding:4px;margin-right: 20px;background: #0d6aad;width: 40px;float: right;text-align: center;color: white;font-size: 12px;
    }
</style>